<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<currentTime :current-time="currentTime"></currentTime>
				</div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.workshopId" :option-list="workshopList" clearable placeholder="区域" size="small" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<jk-search-input v-model="searchParams.deviceRecordNumber" placeholder="设备编号" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<jk-table
				ref="table"
				:data="tableData"
				:height="tableHeight + 20"
			>
				<vxe-column field="number" fixed="left" title="设备" width="80"></vxe-column>
				<vxe-column field="collectDataTime" fixed="left" title="采集时间" width="110">
					<template slot-scope="scope">
						<div style="text-align: center">{{ scope.row.collectDataTime ? scope.row.collectDataTime.slice(0, 10) : '' }}</div>
						<div style="text-align: center">{{ scope.row.collectDataTime ? scope.row.collectDataTime.slice(-9) : '' }}</div>
					</template>
				</vxe-column>
				<!--        一格160px-->
				<vxe-column field="collectDataList" width="26400" title="点位项">
					<template slot-scope="scope">
						<div v-for="(itemList, itemIndex) in scope.row.collectDataList" :key="itemIndex" class="pane" @click="checkDetails(scope.row, itemList)">
							<div style="height: 15px;line-height: 15px;padding: 0">
								{{ itemIndex + 1 + '.'+ itemList.signalName }}
							</div>
							<div style="height: 15px;color: #70b0eb;line-height: 15px;padding: 0">
								{{ itemList.value + ' ' }}{{ itemList.unit ? itemList.unit : null }}
							</div>
						</div>
					</template>
				</vxe-column>
			</jk-table>
			<!-- 分页组件 -->
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="[2]"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					@on-change="onPage"
				/>
			</footer>
			<release-dialog
				:option-list="collectDataList"
				:data-item="detailDialogParams"
				:dialog-state="detailDialogState"
				@on-visible-change="onVisibleChange"
			></release-dialog>
		</jk-card>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { formatDate, pageConfig, formatTime } from '/src/utils/jk/jk-tool';
    import permissionMixin from '../../../mixins/permission-mixin';
    import { getInfo } from '../../../api/login';
    import listView from './components/list-view';
    import chartView from './components/chart-view';
    // import scheduleShift from '../scheduleShiftProductionReport/scheduleShift';
    import data from './data.json';
    import {
        auth,
        collectData
    } from '../../../api/equipmentMonitoring/index.js';
    import releaseDialog from './release-dialog2';
    import detailDialog from '@/views/productionMonitor/energyAnalysis/detail-dialog.vue';
    import currentTime from './components/current-time';
    export default {
        name: 'EquipmentMonitoring',
        mixins: [permissionMixin, calHeight],
        components: {
            currentTime,
            detailDialog,
            listView,
            chartView,
            releaseDialog
        },
        data: function() {
            return {
                collectDataList: [],
                detailDialogParams: {},
                detailDialogState: false,
                prefix: '',
                viewType: 'listView',
                processList: [],
                workshopList: [],
                dataId: null,
                tableLoading: false,
                exportLoading: false,
                tableData: [],
                searchParams: {
                    count: 1,
                    pageNo: pageConfig.pageNo,
                    pageSize: 2,
                    deviceRecordNumber: '',
                    workshopId: null
                },
                yearMonthDay: '',
                hourMinuteSecond: '',
                scheduleShiftList: {},
                currentTime: '',
                interVal2: {},
                interVal: {}
            };
        },
        methods: {
            onVisibleChange(e) {
                // if (e) {
                //     this.clearTimer();
                // } else {
                //     this.runData();
                //     this.runTime();
                // }
                this.detailDialogState = e;
            },
            checkDetails(row, itemList) {
                this.collectDataList = row.collectDataList || [];
                this.detailDialogParams = {
                    machineName: row.number,
                    ...itemList
                };
                this.detailDialogState = true;
            },
            onBackBtn() {
                this.$router.go(-1);
            },
            onPage(e, size) {
                this.searchParams.pageNo = e;
                this.searchParams.pageSize = size;
                this.getListRequest();
            },
            runTime() {
                clearInterval(this.interVal2);
                this.interVal2 = setInterval(() => {
                    this.currentTime = formatTime(Date.now());
                }, 1000);
            },
            runData() {
                clearInterval(this.interVal);
                this.interVal = setInterval(() => {
                    this.getListRequest();
                }, 10000);
            },
            clearTimer() {
                clearInterval(this.interVal);
                clearInterval(this.interVal2);
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                const params = JSON.parse(JSON.stringify(this.searchParams));
                collectData(params).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.tableData.forEach(x => {
                            x.collectDataList.forEach(y => {
                                x.collectDataTime = y.collectTime;
                            });
                        });
                        this.searchParams.count = res.data.count;
                        this.$nextTick(() => {
                            this.$refs.table.$refs.xTable.refreshColumn();
                        });
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.searchParams.count = 1;
                this.getListRequest();
            },
            async getDependentData() {
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                if (!this.searchParams.workshopId) {
                    this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                }
                // this.$set(this.searchParams, 'belongDate', formatDate(Date.now()));
                this.$set(this.searchParams, 'belongDate', '2024-05-30');
                await this.getListRequest();
            }
        },
        beforeRouteEnter(to, from, next) {
            next((_this) => {
                _this.runTime();
                _this.runData();
            });
        },
        beforeRouteLeave(to, from, next) {
            this.clearTimer();
            next();
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped>
.pane{
  display: flex;
  float: left;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: #e8eaec 0.5px solid;
  width: 155px;
  height: 38px;
  color: #1890ff;
  cursor:pointer;
}
</style>
